<template>
  <div>
      <div id="lineChart" ref="lineChart" style="width: 800px;height:400px; margin: 0 auto;"></div>
  </div>
</template>

<script>
export default {
  name: 'LineChart',
  props:{
    title:{
      type:String,
      default:"默认标题"
    },
    xAarr:{ //x轴数据
      type:Array,
      default:()=>[]
    },
    series:{ //数据轴
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
        
 
    };
  },

  mounted() {
      this.makeLineChart();
  },
  methods: {
       makeLineChart(){ //生成折线图
        console.log(this.series,"---------")
      // 1. 初始化echart的操作实例this.$echarts.init(dom元素)
      let mychart=this.$echarts.init(this.$refs.lineChart);

      // 2.准备echarts 的配置项
      var colorList=["red","#129a9c"];
      let option={
        title:{ 
          text:this.title,//图表标题文字
          textStyle:{ //标题文本样式
            color:"#129a9c"
          }
        },
        legend:{ //图例的配置
          data:["sos告警","体征告警"],
          right:40,
          top:0,
          icon:"roundRect",       
          symbolSize:20,
          itemWidth:10, //改变图例标记的图形大小
          itemHeight:10,//改变图例标记的图形大小
          textStyle: {
            fontSize: 14  // 字体大小，虽然不直接控制图标大小，但影响整体布局
          }
        },
        grid:{//网格配置
          show:false,
          right:100,
         
        },
        tooltip:{ //提示框组件
          trigger:"axis", //触发类型
          // {a} --图例名称  {b} x轴内容  {c} --y轴
          //  formatter:"{a}:{b}--{c}" //  {a} {b} {c} 
          //  formatter:"时间：{b}<br/>{a0}&nbsp; : &nbsp;{c0}<br/>{a1}&nbsp;  : &nbsp; {c1}",
            backgroundColor:"#129a9c",
            textStyle:{
              color:"#fff"
            },
            className:"mytooltip",
            formatter:(params)=>{
              console.log(params,"----提示数组----")
              let str=``
              for(var i=0;i<params.length;i++){
                str+=`  <div class="tipvalue">${params[i].seriesName}:${params[i].value}</div>`
              }
              let html=`
                <div class="tipwrap">
                    <div class="tipinfo">
                      <div class="tipname">时间：${params[0].name}</div>
                      ${str}
                    </div>
                </div>
              `
              return html
            }
            
        },
        xAxis:{ //x轴的配置
          axisTick:{
           show:false // 不显示坐标轴刻度线
          },
          type:"category", //x轴类型
          data:this.xArr, //父传子的数据
          axisLabel: {
            rotate: 45, // 设置x轴名字字体倾斜45度
            interval: 0 // 确保所有标签都显示，即使它们会重叠（根据需求调整）
          },
         },
        yAxis:{  //y轴的配置
          type:"value", //y轴类型
           splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          }
        },
        series:this.series.map((item,index)=>{
          return {
            ...item, //将后台返回的数据 和 原来改样式的数据 合并
              type:"line",
             itemStyle:{
              color:colorList[index]
            },
            lineStyle:{
              color:colorList[index]
            }
          }
        }),
       
      }
        // 3.将准备好的配置项设置给 ecahrt实例
        mychart.setOption(option)
        window.addEventListener("resize",function(){
          mychart.resize()
        })
      }
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.$refs.lineChart.__echart_instance.resize)
  },
};
</script>
<style lang="scss">
  
</style>